<template>
  <div>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => this.columns = columns"
      :cellstyles="cellstyles"
      :onSyncTableData="tableChangeFun"
      :cellClick="cellClick"
    >
      
      <!-- :isExportExcel2="true"
      :exportFileName="'经销商资金账户.xlsx'" -->
      <template slot="controls" slot-scope="props">
        <!-- <el-button size="small" type="primary" icon="el-icon-refresh" @click="refresh">刷新</el-button> -->
      </template>
    </FilterTable>

    <BaseDialog
      :visible.sync="openCashFlow"
      :title="'资金异动明细'"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <cashFlow :params="cashFlowParams" @close="cashFlowCloseHandler" />
    </BaseDialog>

    <BaseDialog
      :visible.sync="openFreezeDetails"
      :title="'冻结明细'"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <freezeDetails  :params="freezeDetailParams" @close="cashFlowCloseHandler" />
    </BaseDialog>

  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import {dealerGetAccount} from '@/api/partsmanage/financialManagement/capitalAccount/index';
import cashFlow from '@/pages/partsmanage/financialManagement/capitalAccountShop/customPopup/cashFlow';
import freezeDetails from '@/pages/partsmanage/financialManagement/capitalAccountShop/customPopup/freezeDetails';
export default {
  name: "capitalAccountShop",
  mixins: [dictionary],
  components: {cashFlow,freezeDetails},
  data() {
    return{
      columns: this.createTableColumns(),
      fetchApi: dealerGetAccount,
      fetchParams: {},
      cellstyles:[],
      openCashFlow: false,
      openFreezeDetails: false,
      cashFlowParams:{},
      freezeDetailParams:{},
    };
  },
  created(){
    this.fetchParams = Object.assign({},this.fetchParams)
  },
  methods: {
    cashFlowCloseHandler(){
      this.openCashFlow = false;
      this.openFreezeDetails = false;
      // 重新加载
      this.fetchParams = Object.assign({}, this.fetchParams);
    },
    //当用户点击账户资金和冻结资金时弹框看明细
    cellClick(row,cellName,column,cell,event){
      if(cellName == "accountCapital"){
        this.openCashFlow = true;
        this.cashFlowParams = row;
      }else if(cellName == "frozenCapital"){
        this.openFreezeDetails = true;
        this.freezeDetailParams = row;
      }
    },
    tableChangeFun(dataList) {
      dataList.forEach((item, index) => {
        this.cellstyles.push({ row: item, dataIndex: 'accountCapital', styles: { backgroundColor: 'orange' } });
        this.cellstyles.push({ row: item, dataIndex: 'frozenCapital', styles: { backgroundColor: 'yellow' } });
      });
    },
    createTableColumns () {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '账户资金',
          dataIndex: 'accountCapital',
          sorter: true,
          precision: 2,
          align:"center"
        },
        {
          title: '冻结资金',
          dataIndex: 'frozenCapital',
          sorter: true,
          precision: 2,
          align:"center"
        },
        {
          title: '可用余额',
          dataIndex: 'availableCapital',
          sorter: true,
          precision: 2,
          align:"center"
        },
        {
          title: '币种',
          dataIndex: 'currency',
          sorter: true,
          align:"center"
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.red {
  color: red !important;
}

.orange {
  color: orange;
}

.yellow {
  color: yellow;
}
</style>
